<template>
    <div class="welcome-index">
        <div class="top-main">
            <div class="today">
                2020年9月6日星期日，欢迎您。
            </div>
            <div class="">asdfasdfsda</div>
        </div>
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <div class="grid-box-header"><div>常用功能</div><div>sdfsd</div></div>
                    <div>fdsfsdf</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    待办提醒
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    今日总览
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    系统公告
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    产品动态
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="20">
                <div class="grid-content bg-purple">
                    运营报表
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    运营计划
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {}
</script>

<style lang="less" scoped>
    .welcome-index{
        padding: 20px;
    }
    .top-main {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 8px 0 24px;
    }
    .top-main .today{
        margin-bottom: 4px;
        font-size: 24px;
        font-weight: 600;
        color: #333;
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    /*.el-col {*/
    /*    border-radius: 4px;*/
    /*}*/
    /*.bg-purple-dark {*/
    /*    background: #99a9bf;*/
    /*}*/
    .bg-purple {
        background: #f8fbfd;
    }
    /*.bg-purple-light {*/
    /*    background: #e5e9f2;*/
    /*}*/
    .grid-content {
        border-radius: 4px;
    }
    .grid-box-header{
        display: flex;
        justify-content: space-between;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
